<template>
  <div class="app-container">
    <el-descriptions :column="3" class="margin-top" title="订单详情" border>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"/>
          预览图
        </template>
        <el-image :src="item.img" :preview-src-list="[ item.img ]" shape="square"/>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"/>
          产品名称
        </template>
        <router-link :to="'/product/detail/' + item.productId">
          {{ item.productName }}
        </router-link>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"/>
          卖家名称
        </template>
        <router-link :to="'/user/detail/' + item.sellerId">
          {{ item.sellerRealName }}
        </router-link>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"/>
          卖家联系方式
        </template>
        {{ item.sellerTel }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"/>
          买家名称
        </template>
        <router-link :to="'/user/detail/' + item.buyerId">
          {{ item.buyerRealName }}
        </router-link>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"/>
          买家联系方式
        </template>
        {{ item.buyerTel }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"/>
          购买数量
        </template>
        {{ item.quantity + item.unit }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"/>
          支付金额
        </template>
        {{ item.amount }}元
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"/>
          交易时间
        </template>
        {{ item.happenTime }}
      </el-descriptions-item>

      <el-descriptions-item v-if="item.buyerType === '2'" :span="3">
        <template slot="label">
          <i class="el-icon-user"/>
          审核情况
        </template>
        <div v-if="item.judgeFlag === '-1'">
          <el-tag type="danger"> 驳回 </el-tag>
        </div>
        <div v-else-if="item.judgeFlag == '0'">
          <el-tag> 待审核 </el-tag>
        </div>
        <div v-else-if="item.judgeFlag == '1'">
          <el-tag type="success"> 通过 </el-tag>
        </div>
      </el-descriptions-item>

      <el-descriptions-item v-if="item.buyerType === '2' && item.judgeFlag == '1'" :span="3">
        <template slot="label">
          <i class="el-icon-user"/>
          溯源码
        </template>
        <div v-for="qrcode in qrcodeList" :key="qrcode.id" style="display: inline-block">
          <el-image
            :src="qrcode.img"
            :preview-src-list="imgList"
            style="width: 200px; height: 200px"/>
        </div>
      </el-descriptions-item>

    </el-descriptions>

  </div>
</template>
<script>
import paymentApi from '@/api/trace/payment'
import qrcodeApi from '@/api/trace/qrcode'
export default {
  data() {
    return {
      item: {},
      qrcodeList: [],
      imgList: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      if (this.$route.params && this.$route.params.id) {
        const id = this.$route.params.id
        const params = {
          id: id
        }
        this.getInfo(params)
      } else {
        this.item = {}
      }
    },
    getInfo(id) {
      paymentApi.detail(id)
        .then(response => {
          this.item = response.data.item
          if (this.item.buyerType === '2') {
            this.getQrcode(this.item.id)
          }
        })
    },
    getQrcode(id) {
      qrcodeApi.listByPaymentId({ paymentId: id }).then(res => {
        this.qrcodeList = res.data.list
        for (let i = 0; this.qrcodeList.length; i++) {
          this.imgList.push(this.qrcodeList[i].img)
        }
      })
    }
  }
}
</script>
